<template>
  <BasicTable @register="registerTable">
  </BasicTable>
</template>
<script lang="ts" setup>
import { BasicTable, useTable } from '@/components/Table';

import { getTableData } from '@/api/dataReport/energyComparison'
import { onMounted } from 'vue';


const [registerTable, { setColumns, setTableData, setLoading }] = useTable({
  title: '本周期数据报表',
  columns: [],
  // canResize: false,
  // scroll: { y: 'max-content' },
  pagination: false,
});

onMounted(() => {
  setLoading(true)
})

const formatHeader = (headerData) => {
  const headerList = headerData.map(item => ({
    title: item,
    dataIndex: item,
    width: 100
  }))
  headerList.unshift(
    {
      title: '数据名称',
      dataIndex: 'classifyName',
      width: 120,
      fixed: 'left'
    })
  headerList.push({
    title: '总计',
    dataIndex: 'totalCount',
    width: 120,
    fixed: 'right'
  })
  setColumns(headerList);
}

const formatTableData = (tableData) => {
  const data = tableData.map(item => {
    const { dataMap, ...others } = item
    return {
      ...dataMap, ...others
    }
  })

  setTableData(data)
}

const setData = (header, tableData) => {
  formatHeader(header)
  formatTableData(tableData)
}

const getData = (searchInfo) => {
  setLoading(true)
  getTableData(searchInfo).then(res => {
    setData(res.dateTimeList, res.dataVoList)
  }).catch(e => {
    setData([], [])
  }).finally(() => {
    setLoading(false)
  })
}


defineExpose({
  getData
})


</script>
